<template>
    <view class="message-container">
        <!-- 消息类型列表 -->
        <view class="message-types">
            <view 
                class="type-item" 
                v-for="(item, index) in messageTypes" 
                :key="index"
                @click="navigateToDetail(item)"
            >
                <view class="item-left">
                    <uni-icons :type="item.icon" size="24" color="#1E90FF"></uni-icons>
                </view>
                <view class="item-content">
                    <text class="title">{{ item.title }}</text>
                    <text class="desc">{{ item.desc }}</text>
                </view>
                <view class="item-right">
                    <uni-icons type="right" size="16" color="#999"></uni-icons>
                </view>
            </view>
        </view>

        <!-- 消息详情弹窗 -->
        <uni-popup ref="messagePopup" type="center">
            <view class="popup-content">
                <view class="popup-header">
                    <text class="popup-title">{{ currentType.title }}</text>
                    <uni-icons type="close" size="20" color="#666" @click="closePopup"></uni-icons>
                </view>
                <view class="popup-body">
                    <view class="empty-message">
                        <uni-icons type="info" size="50" color="#999"></uni-icons>
                        <text>暂无消息</text>
                    </view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                messageTypes: [
                    {
                        icon: 'notification',
                        title: '系统通知',
                        desc: '系统相关的重要通知'
                    },
                    {
                        icon: 'chat',
                        title: '互动消息',
                        desc: '评论和回复提醒'
                    },
                    {
                        icon: 'star',
                        title: '活动消息',
                        desc: '活动和优惠信息'
                    }
                ],
                currentType: {}
            };
        },
        methods: {
            navigateToDetail(item) {
                this.currentType = item;
                uni.navigateTo({
                	url:'/pages/mine/myInfo/mesDetail'
                })
            },
            closePopup() {
                this.$refs.messagePopup.close();
            }
        }
    }
</script>

<style lang="scss">
.message-container {
    padding: 20rpx;
}

.message-types {
    background: #fff;
    border-radius: 12rpx;
    overflow: hidden;
}

.type-item {
    display: flex;
    align-items: center;
    padding: 30rpx 20rpx;
    border-bottom: 1rpx solid #eee;

    &:last-child {
        border-bottom: none;
    }
}

.item-left {
    margin-right: 20rpx;
}

.item-content {
    flex: 1;
    display: flex;
    flex-direction: column;

    .title {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 6rpx;
    }

    .desc {
        font-size: 24rpx;
        color: #999;
    }
}

.popup-content {
    background: #fff;
    width: 600rpx;
    border-radius: 12rpx;
    overflow: hidden;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    border-bottom: 1rpx solid #eee;

    .popup-title {
        font-size: 32rpx;
        font-weight: bold;
    }
}

.popup-body {
    padding: 40rpx;
}

.empty-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60rpx 0;

    text {
        margin-top: 20rpx;
        font-size: 28rpx;
        color: #999;
    }
}
</style>